<template>
  <div class="container learnstyle-page">
    <el-row>
      <div>
        <div class="subject">
          <el-divider class="wow bounceInRight faster">
            成绩详情
          </el-divider>

          <el-row :gutter="20">
            <el-col :span="10">
              <div class="grid-content bg-purple">考试名称: {{examInfo.testPaperInfoName}}</div>
            </el-col>
            <el-col :span="7"><div class="grid-content bg-purple">参考时间: {{examInfo.createDate}}</div></el-col>
            <el-col :span="5"><div class="grid-content bg-purple">考试时间: {{examInfo.testPaperExamTime}}分钟</div></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10">
              <div class="grid-content bg-purple">考试用时: {{examInfo.examTime}}</div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                系统评分: <el-tag type="success">{{examInfo.systemMark}}分</el-tag>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                教师评分: <el-tag type="success">{{examInfo.teacherMark}}分</el-tag>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10">
              <div class="grid-content bg-purple">评卷人: {{examInfo.correctName}}</div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple">
                答对题数: <el-tag type="success">{{examInfo.rightNumber}}题 </el-tag>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                 答错题数: <el-tag type="danger">{{examInfo.errorNumber}}题</el-tag>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="exam_list">
          <el-divider class="wow bounceInRight faster">
            试题列表
          </el-divider>
          <question-group-list :groupQuestionList="examQuestionAnswerList"></question-group-list>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
  let that = null
  import questionGroupList from '@/components/question-group-list'
  export default {
    name: 'exam',
    components: {questionGroupList},
    data () {
      return {
       // fileHost: this.$store.state.common.fileHost,
        examInfo: {},
        examInfoId: null,
        examQuestionAnswerList: []
      }
    },

    beforeCreate () {
      that = this
    },

    mounted () {
      this.examInfoId = this.$route.params.id
      this.getExamInfoById(this.examInfoId)
    },

    destroyed () {

    },

    methods: {

     /* isSubjective (questionType) {
        if (questionType !== 1 && questionType !== 2 && questionType !== 6) {
          return true
        }
        return false
      },*/

      getExamInfoById (id) {
          this.axios.get(this.$httpApi.httpUrl('/student/exam/selectExamQuestionAnswer/' + id))
            .then(response => {
              let result = response.data.data
              this.examInfo = result.studentExamInfoDto
              let correctType = this.examInfo.correctType
              if (correctType === 1) {
                this.examInfo.correctName = '系统判分'
              } else if (correctType === 2) {
                this.examInfo.correctName = '教师判分'
              } else {
                this.examInfo.correctName = '系统 + 教师判分'
              }
              this.examQuestionAnswerList = result.questionGroupItemResponseList
          })
      }
    }
  }
</script>
<style>
  .box_card p {
    display: inline-block !important;
  }

  .question_content p {
    display: inline-block !important;
  }

</style>


<style lang='scss' scoped>

  .text {
    font-size: 14px;
  }
  .item {
    padding: 6px 0;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .el-radio-button__inner, .el-radio-group {
    padding-top: 20px !important;
    display: block !important;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    padding: 5px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
